<template>
	<div>
		<el-row :span="24">
			<el-col :sm="24" :xs="0">
				<!-- <PcHedaer ref="pcHedaer"></PcHedaer> -->
				<div class="pc_con">
					<!-- <PcDrawer ref="pcDrawer" :navIndex="navIndex1" :navs="navs" :changeNav="changeNav1"></PcDrawer> -->
					<div class="pc_conbox">
						<div class="pc_conboxs" style="width: 100%;">
							<div class="navbar">
								<!-- <div class="left" @click="back1">
									<i style="display: inline-flex; justify-content: center; align-items: center;">
										<svg viewBox="0 0 21.999 35.998" width="1em" height="1em" fill="currentColor"
											aria-hidden="true" focusable="false">
											<use xlink:href="/icons/spr.svg#comm_icon_x--svgSprite:all"></use>
										</svg>
									</i>
									<span>{{$t('h_recharge.title1')}}</span>
								</div> -->
								<div class="center">
									<img style="transform: rotate(180deg);" src="../assets/images/yh/jiantou.png"
										alt="">
									<div class="pc_title">{{ $t('h_recharge.title2') }}</div>
									<img src="../assets/images/yh/jiantou.png" alt="">
								</div>
								<div class="left" style="justify-content: flex-end;">
									<span @click="goRecordList">{{ $t('h_recharge.title3') }}</span>

									<i style="display: inline-flex; justify-content: center; align-items: center;margin-left: 10px;"
										@click="back1">
										<svg viewBox="0 0 21.999 35.998" width="1em" height="1em" fill="currentColor"
											aria-hidden="true" focusable="false">
											<use xlink:href="/icons/spr.svg#comm_icon_x--svgSprite:all"></use>
										</svg>
									</i>
								</div>
							</div>
							<div class="con">
								<div class="tabs">
									<div :class="'tabsitem ' + (index == navIndex ? 'active' : '')"
										v-for="(item, index) in tabList" :key="index" @click="changeNav(index)">
										{{ $t(item.name) }}
									</div>
								</div>
								<div v-if="tabList && tabList[navIndex] && tabList[navIndex]['children']">
									<div class="list" style="display: none;">
										<div :class="'item ' + (index2 == typeIndex ? 'active' : '')"
											v-for="(item2, index2) in tabList[navIndex]['children']" :key="index2"
											@click="changeType(index2)">
											<img :src="$F.getApiUrl() + item2.icon">
											<div class="text1">{{ $t(item2.name) }}</div>

										</div>
									</div>
									<div
										v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children']">
										<div class="list">
											<div :class="'item ' + (index3 == walletIndex ? 'active' : '')"
												v-for="(item3, index3) in tabList[navIndex]['children'][typeIndex]['children']"
												:key="index3" @click="changeWallet(index3)">
												<div class="text1">{{ $t(item3.name) }}</div>
												<div class="main_item_tab" v-if="item3.send_money_scale > 0">
													<p class="item_text">{{ $t('h_recharge.title4') }}{{
														item3.send_money_scale*1 }}%</p>
													<p></p>
												</div>
											</div>

										</div>
									</div>
									<div
										v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].cate == 3">
										<div class="textbox">
											<span
												style="flex: 1;">{{ $t('h_recharge.title5') }}：{{ tabList[navIndex]['children'][typeIndex]['children'][walletIndex].name }}</span>
											<i class="copy"
												@click="copy(tabList[navIndex]['children'][typeIndex]['children'][walletIndex].name)">{{ $t('h_recharge.title6') }}</i>
										</div>
										<div class="textbox">
											<span
												style="flex: 1;">{{ $t('h_recharge.title7') }}：{{ tabList[navIndex]['children'][typeIndex]['children'][walletIndex].account }}</span>
											<i class="copy"
												@click="copy(tabList[navIndex]['children'][typeIndex]['children'][walletIndex].account)">{{ $t('h_recharge.title6') }}</i>
										</div>
									</div>
									<div style="padding-bottom: 0;" class="balance_adress_box"
										v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].cate == 5">
										<div class="adress_desc" style="">
											<p style="display: flex;">
												<span class="text3">{{ $t('l_shoukuantupian') }}:</span>

											</p>
										</div>
										<div class="adress_desc" style="width: 300px;">
											<img style="width: 40%;height: 100%;"
												:src="tabList[navIndex]['children'][typeIndex]['children'][walletIndex].bld_pic">
										</div>
									</div>
									<div style="padding-bottom: 0;" class="balance_adress_box"
										v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].cate == 4">
										<div class="adress_desc">
											<p style="display: flex;">
												<span class="text3">{{ $t('l_shoukuanxuanze') }}:</span>

											</p>
										</div>
										<div  style="display: flex;">
											<select v-model="fromData.sele" @change="chageSelect" class="pcSele2">
											>
											<option :value="index"
												v-for="(item5, index) in tabList[navIndex]['children'][typeIndex]['children'][walletIndex].banklist"
												:key="index">{{ item5.bank_code
												}}</option>

										</select>
										</div>
										
										<div class="adress_desc" style="">
											<p style="display: flex;justify-content: space-between">
												<span class="text3">{{ $t('l_shoukuanren') }}:
													{{ tabList[navIndex]['children'][typeIndex]['children'][walletIndex].banklist[fromData.sele].bank_name }}</span>
												<i class="text3"
													@click="copy(tabList[navIndex]['children'][typeIndex]['children'][walletIndex].banklist[fromData.sele].bank_name)">{{
														$t('l_fuzhi') }}</i>
											</p>
										</div>
										<div class="adress_desc" style="">
											<p style="display: flex;justify-content: space-between">
												<span class="text3">{{ $t('l_shoukuanyinghang') }}:
													{{ tabList[navIndex]['children'][typeIndex]['children'][walletIndex].banklist[fromData.sele].bank_code }}</span>
												<i class="text3"
													@click="copy(tabList[navIndex]['children'][typeIndex]['children'][walletIndex].banklist[fromData.sele].bank_code)">{{
														$t('l_fuzhi') }}</i>
											</p>
										</div>
										<div class="adress_desc">
											<p style="display: flex;justify-content: space-between;">
												<span class="text3">{{ $t('l_shoukuanzhanghao') }}:
													{{ tabList[navIndex]['children'][typeIndex]['children'][walletIndex].banklist[fromData.sele].bank_number }}</span>
												<i class="text3"
													@click="copy(tabList[navIndex]['children'][typeIndex]['children'][walletIndex].banklist[fromData.sele].bank_number)">{{
														$t('l_fuzhi') }}</i>
											</p>
										</div>
									</div>
									<!-- <div
										v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].cate == 2">
										<div class="textbox">
											<span style="flex: 1;">{{ $t('h_recharge.title8') }}:
												{{ tabList[navIndex]['children'][typeIndex]['children'][walletIndex].account }}</span>
											<i class="text3"
												@click="copy(tabList[navIndex]['children'][typeIndex]['children'][walletIndex].account)">{{ $t('h_recharge.title6') }}</i>
										</div>
									</div> -->
									<div
										v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].price_rule">
										<div class="text3" style="margin-bottom: 15px;">{{ $t('h_recharge.title9') }}
										</div>
										<div class="list" style="border-bottom: 0;">
											<div :class="'item item1 ' + (index4 == balanceIndex ? 'active' : '')"
												v-for="(item4, index4) in tabList[navIndex]['children'][typeIndex]['children'][walletIndex].price_rule.split(',')"
												:key="index4" @click="changeBalance(index4)">
												<div class="text1">{{ item4 }}</div>
											</div>
										</div>
										<div class="input">
											<span>￥</span>
											<el-input
												v-if="tabList[navIndex]['children'][typeIndex]['children'][walletIndex].custom_price == 1"
												v-model="fromData.price" />
										</div>
										<div class="huilv"
											v-if="tabList[navIndex]['children'][typeIndex]['children'][walletIndex].open_coin_scale == 1">
											<span>{{ $t('h_recharge.title10') }} : 1USDT
												=￥{{ tabList[navIndex]['children'][typeIndex]['children'][walletIndex].coin_scale * 1 }}</span>
											<br>
											<span
												style="color: red;">{{ $t('h_recharge.title11') }}:{{ (fromData.price / tabList[navIndex]['children'][typeIndex]['children'][walletIndex].coin_scale).toFixed(4) }}USDT</span>
										</div>
									</div>
									<div
										v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].open_name == 1">
										<div class="inputlabel">
											{{ $t('h_recharge.title12') }}
										</div>
										<div class="inputbox">
											<el-input :placeholder="$t('h_recharge.title13')" v-model="fromData.name">
												<i slot="prefix" style="color: red;line-height: 3;">*</i>
											</el-input>
										</div>
									</div>
									<div
										v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].open_account == 1">
										<div class="inputlabel">
											{{ $t('h_recharge.title14') }}
										</div>
										<div class="inputbox">
											<el-input :placeholder="$t('h_recharge.title15')"
												v-model="fromData.account">
												<i slot="prefix" style="color: red;line-height: 3;">*</i>
											</el-input>
										</div>
									</div>
									<div
										v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].open_address == 1">
										<div class="inputlabel">
											{{ $t('h_recharge.title16') }}
										</div>
										<div class="inputbox">
											<el-input :placeholder="$t('h_recharge.title17')"
												v-model="fromData.address">
												<i slot="prefix" style="color: red;line-height: 3;">*</i>
											</el-input>
										</div>
									</div>
									<div
										v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].open_pic == 1">
										<div class="inputlabel">
											<i slot="prefix"
												style="color: red;line-height: 3;">*</i>{{ $t('h_recharge.title18') }}
										</div>
										<div class="upload_box" @click="uploadPic">
											<i v-if="!fromData.pic" class="el-icon-plus"></i>
											<img v-else :src="fromData.pic" />
										</div>
									</div>
									<div
										v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].msg">
										<div class="inputlabel">
											{{ $t('h_recharge.title19') }}
										</div>
										<div class="text4">
											{{ tabList[navIndex]['children'][typeIndex]['children'][walletIndex].msg }}
										</div>
									</div>
								</div>
								<div class="btn" @click="submit">{{ $t('h_recharge.title20') }}</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :sm="0" :xs="24">
				<div class="recharge pageContainer">
					<div class="recharge_box anquantop">
						<div class="nav_box">
							<div class="back_icon_box" @click="goback()"></div>
							<div class="title">{{ $t('h_recharge.title2') }}</div>
							<div class="right_text" @click="goRecordList">{{ $t('h_recharge.title3') }}</div>
						</div>

					</div>
					<div class="container scroll-container">
						<div class="recharge_content">
							<div class="recharge_content_box">
								<div class="recharge_type_nav">
									<div :class="'nav_item ' + (index == navIndex ? 'nav_active' : '')"
										v-for="(item, index) in tabList" :key="index" @click="changeNav(index)">
										<div class="nav_text">
											{{ $t(item.name) }}
										</div>
										<!-- <div class="nav_tab_box">
											<p class="tab_text">送1%</p>
											<p></p>
										</div> -->
									</div>
								</div>
								<div>
									<div class="recharge_type_box"
										v-if="tabList && tabList[navIndex] && tabList[navIndex]['children']">

										<div class="recharge_type_main">
											<div :class="'type_main_item ' + (index2 == typeIndex ? 'main_active' : '')"
												v-for="(item2, index2) in tabList[navIndex]['children']" :key="index2"
												@click="changeType(index2)">
												<div class="main_item_text">
													<!-- <div class="main_item_img">
														<img :src="$F.getApiUrl()+item2.icon" />
													</div> -->
													<div class="item_text">
														{{ $t(item2.name) }}
													</div>
												</div>
												<svg width="1em" height="1em" fill="currentColor" aria-hidden="true"
													focusable="false">
													<use xlink:href="#comm_img_corner--svgSprite:all"></use>
													<linearGradient id="id-f3496a40-648e-43c7-9335-54f8657e1615"
														x1="0.5" x2="0.5" y2="1"></linearGradient>
												</svg>
												<!-- <div class="main_item_tab">
													<p class="item_text">送{{ item2.sent }}%</p>
													<p></p>
												</div> -->
											</div>

										</div>


										<div class="wallet_type_box"
											v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children']">
											<div :class="'wallet_type_item ' + (index3 == walletIndex ? 'wallet_active' : '')"
												v-for="(item3, index3) in tabList[navIndex]['children'][typeIndex]['children']"
												:key="index3" @click="changeWallet(index3)">
												{{ $t(item3.name) }}

												<div class="main_item_tab" v-if="item3.send_money_scale > 0">
													<p class="item_text">
														{{ $t('h_recharge.title4') }}{{ item3.send_money_scale * 1 }}%</p>
													<p></p>
												</div>
											</div>

										</div>
										<!-- <div style="padding-bottom: 0;" class="balance_adress_box"
											v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].cate == 5">
											<div class="adress_desc" style="margin-bottom: .3rem;">
												<p style="display: flex;">
													<span style="flex: 1;">{{ $t('l_shoukuantupian') }}:</span>

												</p>
											</div>
											<div class="adress_desc">
												<img style="width: 100%;height: 100%;"
													:src="tabList[navIndex]['children'][typeIndex]['children'][walletIndex].bld_pic">
											</div>
										</div>
										<div style="padding-bottom: 0;" class="balance_adress_box"
											v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].cate == 4">
											<div class="adress_desc">
												<p style="display: flex;">
													<span style="flex: 1;">{{ $t('l_shoukuanxuanze') }}:</span>

												</p>
											</div>
											<select v-model="fromData.sele" @change="chageSelect" class="pcSele">
												>
												<option :value="index"
													v-for="(item5, index) in tabList[navIndex]['children'][typeIndex]['children'][walletIndex].banklist"
													:key="index">{{ item5.bank_code
													}}</option>

											</select>
											<div class="adress_desc" style="margin-bottom: .3rem;">
												<p style="display: flex;">
													<span style="flex: 1;">{{ $t('l_shoukuanren')
														}}：{{ tabList[navIndex]['children'][typeIndex]['children'][walletIndex].banklist[fromData.sele].bank_name }}</span>
													<i class="copy"
														@click="copy(tabList[navIndex]['children'][typeIndex]['children'][walletIndex].banklist[fromData.sele].bank_name)">{{
															$t('l_fuzhi') }}</i>
												</p>
											</div>
											<div class="adress_desc" style="margin-bottom: .3rem;">
												<p style="display: flex;">
													<span style="flex: 1;">{{ $t('l_shoukuanyinghang')
														}}{{ tabList[navIndex]['children'][typeIndex]['children'][walletIndex].banklist[fromData.sele].bank_code }}</span>
													<i class="copy"
														@click="copy(tabList[navIndex]['children'][typeIndex]['children'][walletIndex].banklist[fromData.sele].bank_code)">{{
															$t('l_fuzhi') }}</i>
												</p>
											</div>
											<div class="adress_desc">
												<p style="display: flex;">
													<span style="flex: 1;">{{ $t('l_shoukuanzhanghao')
														}}{{ tabList[navIndex]['children'][typeIndex]['children'][walletIndex].banklist[fromData.sele].bank_number }}</span>
													<i class="copy"
														@click="copy(tabList[navIndex]['children'][typeIndex]['children'][walletIndex].banklist[fromData.sele].bank_number)">{{
															$t('l_fuzhi') }}</i>
												</p>
											</div>
										</div>
										<div style="padding-bottom: 0;" class="balance_adress_box"
											v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].cate == 3">
											<div class="adress_desc" style="margin-bottom: .3rem;">
												<p style="display: flex;">
													<span
														style="flex: 1;">{{ $t('h_recharge.title5') }}：{{ tabList[navIndex]['children'][typeIndex]['children'][walletIndex].name }}</span>
													<i class="copy"
														@click="copy(tabList[navIndex]['children'][typeIndex]['children'][walletIndex].name)">{{ $t('h_recharge.title6') }}</i>
												</p>
											</div>
											<div class="adress_desc">
												<p style="display: flex;">
													<span
														style="flex: 1;">{{ $t('h_recharge.title7') }}：{{ tabList[navIndex]['children'][typeIndex]['children'][walletIndex].account }}</span>
													<i class="copy"
														@click="copy(tabList[navIndex]['children'][typeIndex]['children'][walletIndex].account)">{{ $t('h_recharge.title6') }}</i>
												</p>
											</div>
										</div>

										<div style="padding-bottom: 0;" class="balance_adress_box"
											v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].cate == 2">
											<div class="adress_desc">
												<p style="display: flex;word-wrap: break-word;">
													<span
														style="width: 6.2rem;">{{ $t('h_recharge.title8') }}：{{ tabList[navIndex]['children'][typeIndex]['children'][walletIndex].account }}</span>
													<i class="copy"
														@click="copy(tabList[navIndex]['children'][typeIndex]['children'][walletIndex].account)">{{ $t('h_recharge.title6') }}</i>
												</p>
											</div>
										</div> -->

										<div class="recharge_balance_box"
											v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].price_rule">
											<div class="recharge_balance_title">
												{{ $t('h_recharge.title9') }}
											</div>
											<div class="recharge_balance">
												<div :class="'recharge_balance_item ' + (index4 == balanceIndex ? 'balance_active' : '')"
													v-for="(item4, index4) in tabList[navIndex]['children'][typeIndex]['children'][walletIndex].price_rule.split(',')"
													:key="index4" @click="changeBalance(index4)">

													{{ item4 }}

												</div>
											</div>
											<el-input :placeholder="$t('h_recharge.title21')" type="number"
												v-if="tabList[navIndex]['children'][typeIndex]['children'][walletIndex].custom_price == 1"
												v-model="fromData.price">
												<i slot="prefix" class="balance_icon">￥</i>
											</el-input>
											<!-- <div class="balance_input_box">
											<span class="balance_icon">￥</span>
											<input type="text" placeholder="最低1, 最高100000">
										</div> -->
											<div class="input_derc"
												v-if="tabList[navIndex]['children'][typeIndex]['children'][walletIndex].open_coin_scale == 1">
												<span>{{ $t('h_recharge.title10') }} : 1USDT =
													￥{{ tabList[navIndex]['children'][typeIndex]['children'][walletIndex].coin_scale * 1 }}</span>
												<br>
												<span
													style="color: red;">{{ $t('h_recharge.title11') }}:{{ (fromData.price / tabList[navIndex]['children'][typeIndex]['children'][walletIndex].coin_scale).toFixed(4) }}
													USDT</span>
											</div>
										</div>

										<div class="balance_adress_box"
											v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].open_name == 1">
											<div class="adress_desc">
												{{ $t('h_recharge.title12') }}
											</div>
											<el-input :placeholder="$t('h_recharge.title13')" v-model="fromData.name">
												<i slot="prefix" style="color: red;line-height: 3;">*</i>
											</el-input>
										</div>

										<div class="balance_adress_box"
											v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].open_account == 1">
											<div class="adress_desc">
												{{ $t('h_recharge.title14') }}
											</div>
											<el-input :placeholder="$t('h_recharge.title14')"
												v-model="fromData.account">
												<i slot="prefix" style="color: red;line-height: 3;">*</i>
											</el-input>
										</div>

										<div class="balance_adress_box"
											v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].open_address == 1">
											<div class="adress_desc">
												{{ $t('h_recharge.title16') }}
											</div>
											<el-input :placeholder="$t('h_recharge.title17')"
												v-model="fromData.address">
												<i slot="prefix" style="color: red;line-height: 3;">*</i>
											</el-input>
										</div>

										<div class="balance_adress_box"
											v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].open_pic == 1">
											<div class="adress_desc">
												<i slot="prefix"
													style="color: red;line-height: 3;">*</i>{{ $t('h_recharge.title18') }}
											</div>
											<div class="upload_box" @click="uploadPic">
												<i v-if="!fromData.pic" class="el-icon-plus"></i>
												<img v-else :src="fromData.pic" />
											</div>
										</div>

										<div class="desc_box">
											<div class="desc_title">
												{{ $t('h_recharge.title19') }}
											</div>
											<div class="desc_text"
												v-if="tabList && tabList[navIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex] && tabList[navIndex]['children'][typeIndex]['children'][walletIndex].msg">
												{{ tabList[navIndex]['children'][typeIndex]['children'][walletIndex].msg }}


											</div>
											<div class="desc_text">
												<p>{{ $t('h_recharge.title22') }}</p>
											</div>
										</div>
									</div>

									<div class="recharge_btn" @click="submit">
										<span>{{ $t('h_recharge.title20') }}</span>
									</div>
								</div>
								<!-- <div v-if="!navIndex&&navIndex!=0">
									<div class="topCon">
										<el-select v-model="value" placeholder="请选择" popper-class="elsedropdown" >
																	<el-option v-for="item in options" :key="item.value" :label="item.label"
																		:value="item.value">
																	</el-option>
																</el-select>
																<div class="total_recharge">
																	累计充值<span>￥0.00</span>
																</div>
									</div>
									<div class="list">
										<div class="listLeft">
											<div class="listLeftImg">
												<img src="../../assets/images/yh/bg.png" alt="">
											</div>
											<div class="listLeftCon">
												<div class="listLeftConTop">
													支付宝
												</div>
												<div class="listLeftConBot">
													2023-09-18 11：00
												</div>
											</div>
										</div>
										<div class="listRight">
											<div class="listRightTop">
												￥1000.00
											</div>
											<div class="listRightBot">
												订单超时
											</div>
										</div>
									</div>
				
								</div> -->

							</div>
						</div>
					</div>
					<!-- <Tabnav :activeInd="tabnavIndex"></Tabnav> -->
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import Tabnav from './Tabnav.vue'
import PcHedaer from './pcheader.vue'
import PcDrawer from './pcdrawer.vue'
import {
	shrinkImage
} from "shrinkpng";
export default {
	components: {
		Tabnav,
		PcHedaer,
		PcDrawer
	},
	data() {
		return {
			tabnavIndex: 2,
			navIndex: 0,
			typeIndex: 0,
			walletIndex: 0,
			balanceIndex: 0,
			tabList: [],
			fromData: {
				pay_id: 0,
				address: '',
				pic: '',
				price: 0,
				account: '',
				name: '',
				sele: 0,
				type: 0
			},

			navs: [{
				id: 0,
				name: this.$t('h_recharge.title23'),
				key: 'icon_game_menu_active_0',
			},
			{
				id: 2,
				name: this.$t('h_recharge.title24'),
				key: 'icon_game_menu_active_3',
			},
			{
				id: 7,
				name: this.$t('h_recharge.title25'),
				key: 'icon_game_menu_active_1',
			},
			{
				id: 6,
				name: this.$t('h_recharge.title26'),
				key: 'icon_game_menu_active_2',
			},
			{
				id: 1,
				name: this.$t('h_recharge.title27'),
				key: 'icon_game_menu_active_4',
			},
			{
				id: 4,
				name: this.$t('h_recharge.title28'),
				key: 'icon_game_menu_active_5',
			},
			{
				id: 3,
				name: this.$t('h_recharge.title29'),
				key: 'icon_game_menu_active_8',
			},

			{
				id: -2,
				name: this.$t('h_recharge.title30'),
				key: 'icon_game_menu_active_100',
			},
			// {
			// 	id: -3,
			// 	name: '收 藏',
			// 	key: 'icon_game_menu_active_101',
			// },
			{
				id: -4,
				name: this.$t('h_recharge.title31'),
				key: 'comm_icon_ss',
			},
			],
			// navs: [{
			// 		id: 0,
			// 		name: 'h_recharge.title23',
			// 		key: 'icon_game_menu_active_0',
			// 	},
			// 	{
			// 		id: 2,
			// 		name: 'h_recharge.title24',
			// 		key: 'icon_game_menu_active_3',
			// 	},
			// 	{
			// 		id: 7,
			// 		name: 'h_recharge.title25',
			// 		key: 'icon_game_menu_active_1',
			// 	},
			// 	{
			// 		id: 6,
			// 		name: 'h_recharge.title26',
			// 		key: 'icon_game_menu_active_2',
			// 	},
			// 	{
			// 		id: 1,
			// 		name: 'h_recharge.title27',
			// 		key: 'icon_game_menu_active_4',
			// 	},
			// 	{
			// 		id: 4,
			// 		name:'h_recharge.title28',
			// 		key: 'icon_game_menu_active_5',
			// 	},
			// 	{
			// 		id: 3,
			// 		name: 'h_recharge.title29',
			// 		key: 'icon_game_menu_active_8',
			// 	},

			// 	{
			// 		id: -2,
			// 		name: 'h_recharge.title30',
			// 		key: 'icon_game_menu_active_100',
			// 	},
			// 	// {
			// 	// 	id: -3,
			// 	// 	name: '收 藏',
			// 	// 	key: 'icon_game_menu_active_101',
			// 	// },
			// 	{
			// 		id: -4,
			// 		name: 'h_recharge.title31',
			// 		key: 'comm_icon_ss',
			// 	},
			// ],
			navIndex1: 0,
		}

	},
	created() {
		this.paymentAll()
		
	},
	mounted(){
	
	},
	methods: {
		chageSelect() {

		},
		back1() {
			// this.$router.go(-1)
			this.$emit('close_tk')
		},
		openMenus() {
			this.$refs.pcDrawer.openMenus()
		},
		closeMenus() {
			this.$refs.pcDrawer.closeMenus()
		},
		changeNav1(item) {
			this.$router.push('/')
		},
		async copy(text) {
			try {
				await navigator.clipboard.writeText(text);
				this.$message.success(this.$t('h_recharge.title32'))
				/* Resolved - 文本被成功复制到剪贴板 */
			} catch (err) {
				this.$message.success(this.$t('h_recharge.title33'))
				console.error('Failed to copy: ', err);
				/* Rejected - 文本未被复制到剪贴板 */
			}
		},
		submit() {
			let info = this.tabList[this.navIndex]['children'][this.typeIndex]['children'][this.walletIndex]
			if (info.open_name == 1 && !this.fromData.name) {
				return this.$message.error(this.$t('h_recharge.title34'));
			}
			if (info.open_account == 1 && !this.fromData.account) {
				return this.$message.error(this.$t('h_recharge.title35'));
			}
			if (info.open_address == 1 && !this.fromData.address) {
				return this.$message.error(this.$t('h_recharge.title36'));
			}
			if (info.open_pic == 1 && !this.fromData.pic) {
				return this.$message.error(this.$t('h_recharge.title37'));
			}
			if (this.fromData.price * 1 < info.min_price * 1 || this.fromData.price * 1 > info.max_price * 1) {
				return this.$message.error(this.$t('h_recharge.title38') + `${info.min_price * 1}` + this.$t('h_recharge.title39')`${info.max_price * 1}` + this.$t('h_recharge.title40'));
			}
			this.fromData.pay_id = info.id
			this.fromData.type = this.walletIndex
			
			const loading = this.$loading({
				lock: true,
				text: 'Loading',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			this.$api.paymentPay(this.fromData, (res) => {
				loading.close()
				if (res.code == 0) {
					// window.location.href = res.data.url
					window.open(res.data)
					//关闭弹窗
					
					// if (res.data.type == 1) {
					// 	if (localStorage.getItem('ISAPP')) {
					// 		window.location.href = res.data.url
					// 	} else {
					// 		window.location.assign(res.data.url);
					// 	}
					// } else {
					// 	this.fromData.pic = ''
					// 	this.fromData.name = ''
					// 	this.fromData.account = ''
					// 	this.fromData.address = ''
					// 	this.$message.success(this.$t('h_recharge.title41'));
					// }
				} else {
					this.$message.error(
            		{type: 'warning',message:res.msg, customClass: 'messageIndex'});
				}
			})
		},
		paymentAll() {
			const loading = this.$loading({
				lock: true,
				text: 'Loading',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			this.$api.paymentAll({}, (res) => {
				loading.close()
				if (res.code == 0) {
					this.tabList = res.data
					if (res.data) {
						this.changeNav(0)
					}
				} else {
					this.$message.error(res.msg);
				}
			})
		},
		changeNav(index) {
			this.navIndex = index
			this.typeIndex = 0
			this.walletIndex = 0
			this.balanceIndex = 0
			this.changeType(0)
		},
		changeType(index) {
			this.typeIndex = index
			this.walletIndex = 0
			this.balanceIndex = 0
			this.changeWallet(0)
		},
		changeWallet(index) {
			this.walletIndex = index
			console.log(this.walletIndex,'this.walletIndex')
			this.balanceIndex = 0
			this.changeBalance(0)
		},
		changeBalance(index) {
			this.balanceIndex = index
			if (typeof this.tabList[this.navIndex]['children'][this.typeIndex]['children'][this.walletIndex]
				.price_rule != 'undefined' && this.tabList[this.navIndex]['children'][this.typeIndex]['children'][this
					.walletIndex
				].price_rule) {
				this.fromData.price = this.tabList[this.navIndex]['children'][this.typeIndex]['children'][this
					.walletIndex
				]
					.price_rule.split(',')[this.balanceIndex]
			} else {
				this.fromData.price = 0
			}
		},
		goRecordList() {
			// this.navIndex = null
			this.$router.push('../recharge/record')
		},
		goback() {
			// this.$router.go(-1)
			this.$emit('close_tk')
		},
		uploadPic() {
			console.log('图片上传')
			if (document.getElementById('uploads')) {
				document.getElementById('uploads').remove()
			}
			let input = document.createElement('input')
			input.id = "uploads"
			input.type = 'file'
			input.accept = "image/jpg,image/jpeg,image/png"
			document.body.appendChild(input);
			input.addEventListener("change", async (e) => {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});

				const file = e.target.files[0];
				const _file = await shrinkImage(file, {
					quality: 80
				});
				let formData = new FormData();
				formData.append('file', _file);
				this.$api.userUpload(formData, (res) => {
					loading.close()
					if (res.code == 0) {
						this.fromData.pic = res.data.path
					} else {
						this.$message.error(res.msg);
					}
				})
			})
			input.click()

		}
	}
}
</script>
<style type="text/css">
.elsedropdown {
	border: 0.01rem solid var(--theme-color-line);
	background-color: #171e28;
	margin-top: 3px !important;
}

.elsedropdown .el-select-dropdown__item {
	color: var(--theme-text-color-lighten);
}

.elsedropdown .popper__arrow {
	display: none;
}
</style>
<!-- <style scoped>
	* {
		box-sizing: border-box;
	}

	/deep/.el-select .el-input .el-select__caret {
		color: #005dff;
	}

	/deep/.el-table th.el-table__cell>.cell {
		text-align: center !important;
	}

	/deep/.el-input__inner {
		width: 80px !important;
		border-radius: 15px !important;
		padding: 0 !important;
		padding-left: 5px !important;
		height: 30px !important;
		line-height: 30px !important;
		color: var(--theme-text-color) !important;
	}

	/deep/.el-input__inner::placeholder {
		color: var(--theme-text-color) !important;
	}

	/* //下拉框 */
	/deep/.el-select-dropdown {
		border: none !important;
		z-index: 999;
		background-color: rgba(1, 28, 82, 0.8) !important;
	}


	.el-select-dropdown__item.hover,
	.el-select-dropdown__item:hover {
		color: #005dff !important;
		background-color: transparent !important;
	}

	.topCon {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 0.2rem;
		padding-top: 0.2rem;
		box-sizing: border-box;
	}

	.total_recharge {
		font-size: .26rem;
		color: var(--theme-text-color-lighten);
	}

	.total_recharge span {
		color: var(--theme-text-color);
		margin-left: 0.08rem;
	}
</style> -->

<style lang="less">
.pcSele {
	// max-width: 150px;
	// min-width: 90px;
	width: auto !important;
	list-style: none;
	// margin:20px 0;
	line-height: 32px;
	outline: 0;
	background-color: var(--theme-main-bg-color) !important;
	border-radius: 16px;
	box-shadow: none;
	color: var(--theme-text-color-lighten) !important;
	font-size: 12px;
	height: 32px !important;
	text-align: center;
	border-color: var(--theme-color-line);
	margin-bottom: 20px;
}
.pcSele2 {
	// max-width: 150px;
	// min-width: 90px;
	width: auto !important;
	list-style: none;
	// margin:20px 0;
	// line-height: 32px;
	outline: 0;
	background-color: var(--theme-main-bg-color) !important;
	border-radius: 16px;
	box-shadow: none;
	color: var(--theme-text-color-lighten) !important;
	font-size: 12px;
	height: 32px !important;
	text-align: center;
	border-color: var(--theme-color-line);
	margin-bottom: 20px;
}

select {
	max-width: 3.15rem;
	min-width: 1.6rem;
	width: auto !important;
	list-style: none;
	margin: 0;
	line-height: 1.5;
	outline: 0;
	background-color: var(--theme-main-bg-color) !important;
	border-radius: 0.5rem;
	box-shadow: none;
	color: var(--theme-text-color-lighten) !important;
	font-size: .2rem;
	height: 0.5rem !important;
	text-align: center;
	border-color: var(--theme-color-line);
}

select:focus {
	border-color: var(--theme-main-bg-color) !important;
}

.recharge {
	border-top-left-radius: 0.2rem;
	border-top-right-radius: 0.2rem;
	width: 100vw;
	min-height: 100vh;
	// background-color: var(--theme-main-bg-color);


	.main_item_tab {
		height: 0.32rem;
		position: absolute;
		top: -0.18rem;
		right: 0.06rem;

		.item_text {
			font-size: .18rem;
			height: 0.26rem;
			line-height: .26rem;
			padding: 0 0.04rem;
			background-color: var(--theme-secondary-color-error);
			border-radius: 0.125rem 0.125rem 0.125rem 0;
			color: #fff;
			width: 100%;
			font-weight: 300;
		}

		p:nth-child(2) {
			border-bottom: 0.07rem solid transparent;
			border-left: 0.07rem solid var(--theme-secondary-color-error);
			border-right: 0.07rem solid transparent;
			height: 0;
			width: 0;
		}
	}

	.recharge_box {
		background-color: var(--theme-bg-color) !important;
		border-bottom: none;
		padding: 0.2rem 0.3rem;
		border-top-left-radius: 0.2rem;
		border-top-right-radius: 0.2rem;


		.nav_box {
			display: flex;

			.back_icon_box {
				border: solid #fff;
				border-width: 0 0.06rem 0.06rem 0;
				height: 0.2rem;
				left: 0.3rem;
				position: absolute;
				top: 0.28rem;
				transform: rotate(135deg);
				width: 0.2rem;
			}

			.title {
				color: #fff;
				font-size: .3rem;
				text-align: center;
				flex: 1;
			}

			.right_text {
				font-size: .24rem;
				right: 0.3rem;
				color: var(--theme-primary-color);
				position: absolute;
				right: 0.3rem;
			}
		}
	}

	.recharge_content {
		padding: 0.2rem;
		margin-bottom: 4rem;

		.recharge_content_box {
			position: relative;

			.recharge_type_nav {
				padding-top: 0.2rem;
				border-bottom: thin solid var(--theme-color-line);
				display: flex;

				.nav_item {
					font-size: .22rem;
					color: var(--theme-text-color-darken);
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;
					text-align: center;
					height: 0.72rem;
					margin-right: 0.3rem;

					.nav_text {
						font-weight: 300;
					}

					.nav_tab_box {
						height: 0.32rem;
						position: absolute;
						top: -0.02rem;

						.tab_text {
							font-size: .18rem;
							height: 0.26rem;
							line-height: .26rem;
							padding: 0 0.04rem;
							background-color: var(--theme-secondary-color-error);
							border-radius: 0.125rem 0.125rem 0.125rem 0;
							color: #fff;
							width: 100%;
							font-weight: 300;
						}

						p:nth-child(2) {
							border-bottom: 0.07rem solid transparent;
							border-left: 0.07rem solid var(--theme-secondary-color-error);
							border-right: 0.07rem solid transparent;
							height: 0;
							width: 0;
						}
					}
				}

				.nav_active {
					border-bottom: 0.04rem solid var(--theme-primary-color);
					color: var(--theme-primary-color);
				}
			}

			.recharge_type_box {
				.recharge_type_main {
					height: 100%;
					padding: 0.2rem 0;
					display: flex;
					flex-wrap: wrap;
					border-bottom: thin solid var(--theme-color-line);

					.type_main_item {
						margin-bottom: 0.2rem;
						margin: 0.1rem;
						position: relative;
						width: 2.09rem;
						border: thin solid var(--theme-color-line);
						border-radius: 0.1rem;
						height: 0.7rem;

						.main_item_text {
							align-items: center;
							display: flex;
							height: 100%;
							width: 100%;

							.main_item_img {
								border-radius: 0.05rem;
								height: 0.44rem;
								margin-left: 0.08rem;
								margin-right: 0.03rem;
								overflow: hidden;
								width: 0.44rem;

								img {
									width: 0.44rem;
									height: 0.44rem;
								}
							}

							.item_text {
								font-size: .22rem;
								flex: 1;
								color: var(--theme-text-color-darken);
								text-align: center;
							}
						}


					}

					.main_active {
						border: thin solid var(--theme-filter-active-color);
						color: var(--theme-primary-color);
						// border: thin solid var(--theme-active-bg-color);

						.main_item_text {
							.item_text {
								color: var(--theme-primary-color);
							}
						}
					}
				}

				.wallet_type_box {
					height: 100%;
					padding: 0.2rem 0;
					display: flex;
					flex-wrap: wrap;
					border-bottom: thin solid var(--theme-color-line);
					position: relative;

					.wallet_type_item {
						position: relative;
						margin-bottom: 0.2rem;
						margin: 0.1rem;
						width: auto !important;
						border: thin solid var(--theme-color-line);
						border-radius: 0.1rem;
						height: 0.7rem;
						color: var(--theme-text-color);
						font-size: .18rem;
						text-align: center;
						line-height: 0.7rem;
						padding: 0 0.5rem;

						.main_item_tab {
							height: 0.32rem;
							position: absolute;
							top: -0.18rem;
							right: 0.06rem;

							.item_text {
								font-size: .18rem;
								height: 0.26rem;
								line-height: .26rem;
								padding: 0 0.04rem;
								background-color: var(--theme-secondary-color-error);
								border-radius: 0.125rem 0.125rem 0.125rem 0;
								color: #fff;
								width: 100%;
								font-weight: 300;
							}

							p:nth-child(2) {
								border-bottom: 0.07rem solid transparent;
								border-left: 0.07rem solid var(--theme-secondary-color-error);
								border-right: 0.07rem solid transparent;
								height: 0;
								width: 0;
							}
						}
					}

					.wallet_active {
						border: thin solid var(--theme-filter-active-color);
						color: var(--theme-primary-color);
					}

				}

				.recharge_balance_box {
					padding: 0.3rem 0;

					.recharge_balance_title {
						font-size: .24rem;
						color: var(--theme-text-color-darken);
						font-weight: 300;
						margin-bottom: 0.2rem;
					}

					.recharge_balance {
						height: 100%;
						padding-bottom: 0.2rem;
						display: flex;
						flex-wrap: wrap;

						.recharge_balance_item {
							margin-bottom: 0.2rem;
							margin: 0.1rem;
							width: 1.51rem;
							border: thin solid var(--theme-color-line);
							border-radius: 0.1rem;
							height: 0.7rem;
							color: var(--theme-text-color);
							font-size: .18rem;
							text-align: center;
							line-height: 0.7rem;
						}

						.balance_active {
							// border: thin solid var(--theme-active-bg-color);
							color: var(--theme-primary-color);
							border: thin solid var(--theme-filter-active-color);
						}
					}

					.balance_icon {
						font-size: .3rem;
						color: var(--theme-text-color-darken);
						font-weight: 700;
						position: absolute;
						top: 50%;
						left: -0.1rem;
						transform: translateY(-50%);
						font-style: normal;
					}

					// .balance_input_box {
					// 	border: thin solid var(--theme-color-line);
					// 	height: 0.7rem;
					// 	border-radius: 0.1rem;
					// 	width: 97%;
					// 	margin: auto;
					// 	position: relative;
					// 	box-sizing: border-box;

					// 	input {
					// 		background:none;
					// 		outline:none;
					// 		border:none;
					// 		color: var(--theme-text-color-darken);
					// 		height: 0.7rem;
					// 		width: 88%;
					// 		position: absolute;
					// 		left: 0.6rem;
					// 	}
					// 	input::placeholder {
					// 		color: var(--theme-text-color-lighten);
					// 	}
					// }
					.input_derc {
						font-size: .22rem;
						margin-top: 0.2rem;
						margin-left: 0.1rem;
						color: var(--theme-text-color);
					}
				}

				.upload_box {
					width: 2rem;
					height: 2rem;
					background-color: var(--theme-main-bg-color);
					border: .02rem solid var(--theme-color-line);
					border-radius: 0.1rem;
					color: var(--theme-text-color-darken);
					position: relative;
					overflow: hidden;

					i {
						line-height: 2rem;
						font-size: .4rem;
						text-align: center;
						display: block;
					}

					img {
						display: block;
						width: 100%;
						height: 100%;
					}
				}

				.balance_adress_box {
					padding: 0.3rem 0;
					border-top: thin dashed var(--theme-color-line);

					.adress_desc {
						font-size: .18rem;
						color: var(--theme-text-color-darken);
						font-weight: 300;
						margin-bottom: 0.1rem;

						span {
							display: block;
							line-height: 0.5rem;
						}

						.copy {
							display: block;
							background: var(--theme-active-bg-color);
							height: .5rem;
							padding: 0 .1rem;
							border-radius: .1rem;
							line-height: 0.5rem;
							font-style: normal;
						}
					}
				}

				.desc_box {
					font-size: .18rem;
					margin-bottom: 0.2rem;

					.desc_title {
						color: var(--theme-text-color-darken);
						font-weight: 300;
						margin-bottom: 0.08rem;
					}

					.desc_text {
						color: var(--theme-text-color-lighten);
					}
				}
			}

			.recharge_btn {
				border-radius: 0.14rem;
				font-size: .24rem;
				height: 0.7rem;
				background-color: var(--theme-primary-color);
				color: var(--theme-primary-font-color);
				text-align: center;
				line-height: 0.7rem;
				margin-bottom: 0.2rem;
			}

			.list {
				padding: 0.2rem;
				box-sizing: border-box;
				background-color: #0e131b;
				border-radius: 4px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 0.2rem;

				.listLeft {
					display: flex;
					align-items: center;

					.listLeftImg {
						img {
							width: 30px;
							height: 30px;
							margin-right: 0.2rem;
						}
					}

					.listLeftConTop {
						font-size: .24rem;
						color: var(--theme-text-color-darken);
					}

					.listLeftConBot {
						font-size: .22rem;
						color: var(--theme-text-color-lighten);
					}
				}

				.listRight {
					text-align: right;
					font-size: .26rem;

					.listRightTop {
						font-weight: 700;
						color: var(--theme-text-color-darken);
					}

					.listRightBot {
						color: var(--theme-secondary-color-error);
					}
				}
			}
		}
	}

}

.navbar {
	width: 100%;
	height: 47px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--theme-top-nav-bg);
	;
	border-radius: 7px;
	padding: 0 15px;
}

.navbar .left {
	width: 183px;
	position: fixed;
	right: 20px;
	top: 10px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	cursor: pointer;
}

.navbar .left i {
	font-size: 15px;
	color: var(--theme-text-color);
}

.navbar .left span {
	margin-left: 6px;
	font-size: 16px;
	color: var(--theme-text-color);
}

.navbar .center {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.navbar .center img {
	width: 59px;
	height: 7px;
}

.pc_title {
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	color: var(--theme-text-color-darken);
	display: -webkit-box;
	font-size: 19px;
	margin: -2px 9px 0;
	overflow: hidden;
	text-align: center;
	text-overflow: ellipsis;
	vertical-align: middle;
}

.pc_conboxs {
	padding-top: 0 !important;

	.con {
		flex: 1;
		height: auto;
		background-color: var(--theme-top-nav-bg);
		border-radius: 10px;
		position: relative;
		padding: 0 15px 15px 15px;
		// margin-top: 15px;
	}

	.tabs {
		width: 100%;
		height: auto !important;
		display: flex;
		justify-content: flex-start;
		padding: 17px 0;
		border-bottom: 1px solid var(--theme-color-line);
	}

	.tabsitem {
		position: relative;
		height: 29px;
		margin-right: 23px;
		border-bottom: 2px solid transparent;
		color: #fff;
		cursor: pointer;
		font-size: 14px;
		padding: 10px 0;
	}

	.tabsitem.active {
		color: var(--theme-primary-color);
		border-bottom: 2px solid var(--theme-primary-color);
	}

	.list {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		padding-top: 15px;
		padding-bottom: 7px;
		border-bottom: 1px solid var(--theme-color-line);
		position: relative;

		.main_item_tab {
			height: 32px;
			position: absolute;
			top: -10px;
			right: -6px;

			.item_text {
				font-size: 16px;
				height: 16px;
				line-height: 16px;
				padding: 0 5px;
				background-color: var(--theme-secondary-color-error);
				border-radius: 12px 12px 12px 0;
				color: #fff;
				width: 100%;
				font-weight: 300;
			}

			p:nth-child(2) {
				border-bottom: 10px solid transparent;
				border-left: 10px solid var(--theme-secondary-color-error);
				border-right: 10px solid transparent;
				height: 0;
				width: 0;
			}
		}
	}

	.item {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		margin-bottom: 15px;
		border-radius: 7px;
		cursor: pointer;
		height: 47px;
		margin-right: 3.5%;
		position: relative;
		width: 31%;
		border: 1px solid var(--theme-color-line);
	}

	.item:nth-child(3n) {
		margin-right: 0;
	}

	.item img {
		width: 34px;
		height: 34px;
		margin-left: 6px;
		margin-right: 2px;
	}

	.item .text1 {
		flex: 1;
		text-align: center;
		color: #ffffff;
		font-size: 14px;
	}

	.item.active {
		border: 1px solid var(--theme-primary-color);
	}

	.item.active .text1 {
		color: var(--theme-primary-color);
	}

	.text3 {
		margin-top: 23px;
		color: var(--theme-text-color-darken);
		font-size: 14px;
		margin-bottom: 4px;
	}

	.item1 {
		width: 22.375%;
	}

	.item1:nth-child(3n) {
		margin-right: 3.5%;
	}

	.item1:nth-child(4n) {
		margin-right: 0;
	}

	.input {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 47px;
		border: 1px solid var(--theme-color-line);
		border-radius: 7px;
	}

	.input span {
		width: 50px;
		text-align: center;
		color: #ffffff;
		font-size: 18px;
		font-weight: 700;
	}

	.el-input {
		flex: 1;
	}

	.el-input__inner {
		width: 99% !important;
		height: 45px !important;
		border: 0 !important;
		border-radius: 0 !important;
		font-size: 14px !important;
		padding: 0 !important;
	}

	.btn {
		width: 100%;
		height: 43px;
		text-align: center;
		line-height: 43px;
		background-color: var(--theme-primary-color);
		margin-bottom: 15px;
		color: #fff;
		font-size: 15px;
		border-radius: 10px;
		cursor: pointer;
		margin-top: 15px;
	}

	.textbox {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;
	}

	.textbox span {
		font-size: 14px;
		color: #fff;
	}

	.textbox i {
		padding: 0 10px;
		height: 30px;
		line-height: 30px;
		border-radius: 7px;
		font-size: 14px;
		color: #fff;
		background: var(--theme-active-bg-color);
		font-style: normal;
	}

	.huilv {
		width: 100%;
		margin-top: 7px;
		font-size: 14px;
		color: var(--theme-text-color);
	}

	.inputlabel {
		font-size: 14px;
		color: var(--theme-text-color-darken);
		font-weight: 300;
		margin-bottom: 10px;
		margin-top: 23px;
	}

	.inputbox .el-input__prefix {
		left: 14px !important;
		top: 4px !important;
	}

	.inputbox .el-input__inner {
		width: 100% !important;
		border: 1px solid var(--theme-color-line) !important;
		border-radius: 7px !important;
		padding: 0 30px !important;
	}

	.upload_box {
		width: 140px;
		height: 140px;
		background-color: var(--theme-main-bg-color);
		border: 1px solid var(--theme-color-line);
		border-radius: 7px;
		color: var(--theme-text-color-darken);
		position: relative;
		overflow: hidden;

		i {
			line-height: 140px;
			font-size: 28px;
			text-align: center;
			display: block;
		}

		img {
			display: block;
			width: 100%;
			height: 100%;
		}
	}

	.text4 {
		color: var(--theme-text-color-lighten);
		font-size: 14px;
	}
}

#uploads {
	position: absolute;
	top: -100px;
	left: 0;
}
.messageIndex {

z-index: 9999999 !important; // 设置的值一定要比2007大，因为dialog的层级是2007

}
</style>